import React, { Component } from 'react'
import { NavBar,Icon} from "antd-mobile"
import chatImgO1 from "../../assets/images/chatImg04.png"
import chatImgO2 from "../../assets/images/chatImg05.png"

import "./weChat.scss"
export default class weChat extends Component {
    state={
        chatmegList:[
            { chatId: 1, chatName: "WIS小希"},
            { chatId: 2, chatName: "大琳erdarling"},
            { chatId: 3, chatName: "喵小姐"},
        ],
        chartName:""
    }
    componentDidMount(){
        console.log(this.props.match.params.chatId)
        let chatId = parseInt(this.props.match.params.chatId)
        let s=this.state.chatmegList[chatId-1].chatName
        this.setState({
            
            chartName:s
        })
    }
    render() {
        return (
            <div className="mgweChat">
                
                 <div className="weChatTop">
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    > 
                   {this.state.chartName}
                    </NavBar>
                </div>
                <div className="weChatCon">
                    <div className="ChatConTimeList">2020-09-23 14:40</div>
                    <div className="ChatConTimeListinp">
                        <i></i>
                        <div className="conTimeListL">
                            在吗
                        </div>
                        <div className="conTimeListImg">
                            <img src={chatImgO2} alt =""></img>
                        </div>
                    </div>

                </div>
                <div className="weChatBottomP">
                <div className="weChatBottom">
                    <input type="file" accept="image/*" className="weBottomImg"></input>
                    <img src={chatImgO1} alt="" className="weChatBottomImg2"></img>
                    <input type="text" className="weBottomInp"></input>
                    <button className="weBottomBtn">发送</button>
                </div>
                </div>
                
            </div>
        )
    }
}
